<template>
	<view>
		<u-sticky :offset-top="h">
		
			<view class="tabbar">
				<view :class="{'aa':active == 0}" @click="add(0)" style="width: 50%;">我的投递</view>
				<view :class="{'aa':active == 1}" @click="add(1)" style="width: 50%;">系统消息</view>
			</view>
		</u-sticky>
		
		<scroll-view
		  scroll-y 
		  @scrolltolower="loadMore"
		  :style="{'height': `calc(100vh - ${upx2px}px)`}"
		  :scroll-with-animation="true">
		  <!-- 内容区域 -->
		  <view v-for="item in messageArray" v-if="active == 1">
		  	<notification :messageDetil="item"></notification>
		  </view>
		  <view v-if="active == 0">
			  
		  </view>
		 <Loading :status ='status'></Loading>
			
		</scroll-view>
	</view>
</template>

<script>
	import notification from '@/components/common/notification/notification.vue'
	import {messageList} from '@/api/message/message.js'
	import {deliverPage} from '@/api/talent/talent.js'
	import Loading from '@/components/loading/loading.vue'
	import {
		getNavigationBarHeight,
		getTitleBarHeight
	} from '@/utils/system.js';
	export default {
		name:"yuanGongMassage",
		components:{notification,Loading},
		data() {
			return {
				status:'loadmore',
				upx2px:uni.upx2px(400),
				active: 1,
				messageArray:[],
				deliverList:[],
				queryParams:{
					pageNum:1,
					pageSize:10,
					status:1
				},
			};
		},
		methods:{
			async messageList(data){
				let res = await messageList(data)
				console.log(res,"消息")
				if(res.code == 200){
					if(this.messageArray.length < res.total){
						this.messageArray = [...this.messageArray,...res.rows]
					}else{
						this.status = "nomore"
					}
				}
			},
			async deliverPage(data){
				let res = await deliverPage(data)
				console.log(res,"我的投递")
				if(res.code == 200){
					if(this.deliverList.length < res.total){
						this.deliverList = [...this.deliverList,...res.rows]
					}else{
						this.status = "nomore"
					}
				}
			},
			add(index) {
				this.active = index
				if(index == 1){
					this.deliverPage()
				}else{
					this.messageList(this.queryParams)
				}
				
			},
			loadMore () {
				console.log('底部触发')
				this.status = 'loading'
			},
		},
		computed: {
			h() {
				return getNavigationBarHeight() + getTitleBarHeight()
			}
		},
		mounted() {
			this.messageList(this.queryParams)
		}
	}
</script>

<style lang="scss">
.tabbar {
		display: flex;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;

		view {
			background-color: #eee;
		}

		.aa {
			border-bottom: 4rpx solid springgreen;
			background-color: #fff;
		}
	}
</style>